.camera {
  perspective: 1500px;
  transform-style: preserve-3d;
}
.space {
  width: 300px;
  height: 300px;
  border: 1px dashed rgba($color: #000000, $alpha: 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  margin: 30px auto;
  transform: rotateX(25deg);
}
.box {
  transform-style: preserve-3d;
  position: relative;
  width: 120px;
  height: 50px;
  transform-origin: center center;
  animation: rotate 12s infinite linear;
}

.side {
  width: 120px;
  height: 50px;
  border-radius: 10px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #FFF;
}
.side1 {
  transform: rotateY(0deg) translateZ(120px) ;
  background-color: rgb(146, 144, 238);
}
.side2 {
  transform: rotateY(60deg) translateZ(120px);
  background-color: lightpink;
}
.side3 {
  transform: rotateY(120deg) translateZ(120px);
  background-color: lightgreen;
}
.side4 {
  transform: rotateY(180deg) translateZ(120px);
  background-color: lightcoral;
}
.side5 {
  transform: rotateY(240deg) translateZ(120px);
  background-color: lightgray;
}
.side6 {
  transform: rotateY(300deg) translateZ(120px);
  background-color: lightskyblue;
}

@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(-360deg);
  }
}